<template>
  <div class="time">{{ currentTime }}</div>
  <div class="time-day">
    <p style="margin-right: 4px">{{ currentDate }}</p>
    <p>{{ currentWeekDay }}</p>
  </div>
  <div style="text-align: center">
    <el-input style="max-width: 600px; height: 45px" placeholder="Please input" class="input-with-select">
      <template #prepend>
        <el-select placeholder="Select" style="width: 90px">
          <el-option label="Restaurant" value="1" />
          <el-option label="Order No." value="2" />
          <el-option label="Tel" value="3" />
        </el-select>
      </template>
      <template #append>
        <el-button :icon="Search" />
      </template>
    </el-input>
  </div>
  <div class="grid">
    <OneLink class="grid-div grid-item-lm"></OneLink>
    <OneLink class="grid-div grid-item-lm"></OneLink>
    <OneLink class="grid-div grid-item-lm"></OneLink>
    <OneLink class="grid-div grid-item-lm"></OneLink>
    <OneLink class="grid-div grid-item-lm"></OneLink>
    <OneLink class="grid-div grid-item-lm"></OneLink>
    <OneLink class="grid-div grid-item-lm"></OneLink>
    <OneLink class="grid-div grid-item-lm"></OneLink>
    <OneLink class="grid-div grid-item-lm"></OneLink>
    <OneLink class="grid-div grid-item-lm"></OneLink>
    <OneLink class="grid-div grid-item-lm"></OneLink>
    <OneLink class="grid-div grid-item-lm"></OneLink>
    <OneLink class="grid-div grid-item-lm"></OneLink>
    <OneLink class="grid-div grid-item-lm"></OneLink>
    <OneLink class="grid-div grid-item-lm"></OneLink>
    <OneLink class="grid-div grid-item-lm"></OneLink>
    <OneLink class="grid-div grid-item-lm"></OneLink>
  </div>
</template>
<style lang="less" scoped>
.time {
  text-align: center;
  font-size: 80px;
  font-weight: 400;
  color: #fff;
  height: 80px;
  line-height: 80px;
}
.time-day {
  color: #fff;
  display: flex;
  justify-content: center;
}
:deep(.el-input-group__prepend) {
  box-shadow: none;
}
:deep(.el-input-group--prepend .el-input-group__prepend .el-select .el-select__wrapper) {
  box-shadow: none;
}
:deep(.el-input-group--prepend) {
  box-shadow: none;
}
:deep(.el-input-group__append) {
  border-radius: 0 25px 25px 0;
  background-color: #fff;
}
:deep(.el-input-group__prepend) {
  border-radius: 25px 0 0 25px;
  background-color: #fff;
}
:deep(.el-input-group__append) {
  box-shadow: none;
}
:deep(.el-input__wrapper) {
  box-shadow: none;
}
:deep(.el-input__wrapper:hover) {
  box-shadow: none;
}
:deep(.el-input__wrapper.is-focus) {
  box-shadow: none;
}
.grid {
  width: 1250px;
  display: grid;
  margin: 20px auto;
  justify-content: center;
  align-items: center;
  /*  声明列的高度  */
  grid-template-columns: repeat(auto-fill, 75px);
  /*  声明行的高度  */
  grid-template-rows: repeat(auto-fill, 75px);
  /*  声明行间距和列间距  */
  grid-gap: 36px;
}
.grid-div {
  /*  声明宽占4个小盒子  */
  grid-column: span 1;
  /*  声明高占2个小盒子  */
  grid-row: span 1;

  background-color: #fff;
  height: 60px;
  width: 60px;
}
</style>
<script lang="ts" setup>
import { Search } from '@element-plus/icons-vue'
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import Sortable from 'sortablejs'
import OneLink from '@/components/OneLink.vue'

const currentTime = ref<String>('')
const currentDate = ref<String>('')
const currentWeekDay = ref<String>('')
const timer = ref<number>(0)

function formatTime(date: Date) {
  return date.toLocaleTimeString('default', { hour: '2-digit', minute: '2-digit' })
}

function updateTime() {
  const now = new Date()
  const month = String(now.getMonth() + 1).padStart(2, '0') // 月份是从0开始的，所以加1
  const day = String(now.getDate()).padStart(2, '0')
  currentTime.value = formatTime(now)
  currentDate.value = `${month}月${day}日`
  currentWeekDay.value = now.toLocaleDateString('zh-CN', { weekday: 'long' })
}

let grid = ref<any>()

onMounted(async () => {
  grid.value = document.querySelector('.grid')
  //sortable对象
  new Sortable(grid.value, {
    animation: 150,
    handle: '.grid-item-lm' //对grid的子对象中，带有.grid-item启动拖拽效果
  })
})

onMounted(() => {
  updateTime()
  timer.value = setInterval(() => {
    updateTime()
  }, 1000)
})
onBeforeUnmount(() => {
  clearInterval(timer.value)
})
</script>
